<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>详情页</title>
	<meta name="keywords" content="">
	<meta name="description" content="">
	<script src="js/rem.js"></script>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<link rel="stylesheet" type="text/css" href="css/page.css"/>
	<link rel="stylesheet" type="text/css" href="css/all.css"/>
	<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loaders.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/loading.css"/>
	<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
	<style>
		
	</style>
	<script type="text/javascript">
		$(function () {
			var productId = decodeURI(location.search.substr(4)).replace(/\'/g, "");
		// 	alert(productId);
			findProduct(productId);
		//	initCartButton(productId);
			history(productId)
		})

		function history(productId){
			var queryUrl = baseUrl+ "/zuul-product/products/" + productId +"/get";
			$.get(queryUrl, function (result){
				if (result.state == 1000){
					console.log(result);
				}
			})
		}
		function findProduct(productId) {
			var queryByProIdUrl = baseUrl+ "/zuul-product/products/get/" + productId ;
		//	alert (queryByProIdUrl) ;
			$.get(queryByProIdUrl, function (result) {
				if (result.state == 1000) {
					var typelist = result.data;
				//	alert (typelist.image_path) ;
				
					var content = "";
					for (var i = 1; i <= 5; i++) {
					content += '<div class="swiper-slide"><a href="javascript:void(0)">';
					content += '<img class="swiper-lazy" src=' + typelist.image.replace(/1.jpg/,i + "_big.png") +' alt="" /></a></div> ';
					}
			//		alert (content ) ;
					$(".swiper-wrapper").html(content);
					$("#pro").html(typelist.itemType);
					$("#desc2").html(typelist.title);
					
					var content1 = typelist.price + "元";
					$("#price").html(content1);

					var content2 = "库存：" + typelist.num +'<br>'+ "\n销量：" + typelist.priority;
					$("#sales").html(content2);

					
				

					var content3 = "<span></span>\n";
					content3 += '<img src="' + typelist.image.replace(/1.jpg/, "2_big.png") + '"/>';
					$("#gwcphoto").append(content3);

					var content4 = '<p class="tit">' + typelist.title + '</p>';
					content4 += "<span>" + typelist.price + "</span>";
					$("#gwcprice").html(content4);

					var swiper = new Swiper('.swiper-container', {
						pagination: '.swiper-pagination', //分页器
						paginationClickable: true,
						autoplay: true,//自动播放
						speed: 3000,//轮播速度
						loop: true,//是否循环轮播
						<!-- 下面俩行代码就是解决异步加载数据导致swiper不轮播的关键 -->
						observer: true,//修改swiper自己或子元素时，自动初始化swiper
						observeParents: true,//修改swiper的父元素时，自动初始化swiper
					});

				}
				else {
					alert(result.message);
				}
			})
		}
	</script>
</head>
<!--loading页结束-->
<body>
<!--header star-->
<header class="mui-bar mui-bar-nav" id="header">
	<a class="btn" href="javascript:history.go(-1)">
		<i class="iconfont icon-fanhui"></i>
	</a>
	<div class="top-sch-box top-sch-boxtwo flex-col">
		<ul>
			<li class="cur"><a href="#">商品</a></li>
			<li><a href="#">详情</a></li>
			<li><a href="#">评价</a></li>
		</ul>
	</div>
	<a class="btn" href="#">
		<i class="iconfont icon-gouwuche"></i>
		<span>2</span>
	</a>
</header>
<!--header end-->

<div class="warp warptwo clearfloat">

	<div class="detail clearfloat">
		<!--banner star-->
		<div class="banner swiper-container">
			<div class="swiper-wrapper">

			</div>
			<div class="swiper-pagination"></div>
		</div>
		<!--banner end-->
		<div class="top clearfloat box-s">
			<div class="shang clearfloat">
				<div class="zuo clearfloat fl over2 box-s" id="pro">
					<!--                    小米MAX智能安卓6.4吋大屏手机双卡指纹识别Xiaomi/小米 小米Max-->
				</div>
				<br><br>
				<div class="zuo clearfloat fl over2 box-s" id="desc2">
					<!--                    小米MAX智能安卓6.4吋大屏手机双卡指纹识别Xiaomi/小米 小米Max-->
				</div>
				<div class="you clearfloat fr">
					<i class="iconfont icon-fenxiang"></i>
					<p>分享</p>
				</div>
			</div>
			<div class="xia clearfloat">
				<p class="jifen fl box-s" id="price"><samp>2998</samp>购物币+<samp>700</samp>积分</p>
				<span class="fr" id="sales">销量8件</span>
			</div>
		</div>
<!-- 		<div class="middle clearfloat box-s">
			<a href="#">
				<span class="fl">商品详情</span>
				<p class="jifen fl box-s"  ></p>
				<i class="iconfont icon-jiantou1 fr"></i>
			</a>
		</div> -->
		<div class="middle clearfloat box-s">
			<a href="#">
				<span class="fl">商品评价</span>
				<i class="iconfont icon-jiantou1 fr"></i>
			</a>
		</div>
	</div>
</div>

<!--footerone star-->
<div class="footerone clearfloat">
	<div class="left clearfloat fl">
		<ul>
			<li>
				<a href="#">
					<i class="iconfont icon-shangcheng"></i>
					<p>商城</p>
				</a>
			</li>
			<li>
				<a href="#">
					<i class="iconfont icon-kefu1"></i>
					<p>客服</p>
				</a>
			</li>
		</ul>
	</div>
	<div class="right clearfloat fl">
		<span class="btn fl" onClick="toshare()">加入购物车</span>

		<a href="confirm.html" class="btn btnone fl">立即购买</a>
	</div>
</div>
<!--footerone end-->

<!--这里是弹出购物车内容-->
<!-- 
<div class="am-share am-modal-active">
		<div class="am-share-footer"><button class="share_btn"><img src="img/chahao.png"></button></div>
		  <div class="am-share-sns box-s">
		     <div class="sdetail clearfloat">
		     	<div class="top clearfloat">
		     		<div class="tu clearfloat fl">
		     			<span></span>
		     			<img src="upload/22.jpg">
		     		</div>
		     		<div class="you clearfloat fl">
		     			<p class="tit">小米Max</p>
		     			<span>2998购物币+700积分</span>
		     		</div>
		     	</div>
		     	<div class="middle clearfloat">
		     		<p>颜色分类</p>
		     		<div class="xia clearfloat">
		     			<ul>
			     			<li class="ra3 cur">金色</li>
			     			<li class="ra3">灰色</li>
			     		</ul>
		     		</div>		     		
		     	</div>
		     	<div class="middle clearfloat">
		     		<p>机身内存</p>
		     		<div class="xia clearfloat">
		     			<ul>
			     			<li class="ra3 cur">128G</li>
			     			<li class="ra3">16G</li>
			     		</ul>
		     		</div>		     		
		     	</div>
		     	<div class="bottom clearfloat">
		     		<p class="fl">购买数量</p>
		     		<div class="you clearfloat fr">
		     			<ul>
		     				<li><img src="img/jian.jpg"></li>
		     				<li>1</li>
		     				<li><img src="img/jia.jpg"></li>
		     			</ul>
		     		</div>
		     	</div>
		     </div>
		  </div>
		  <a href="confirm.html" class="shop-btn db">确定</a>
		</div>
		 -->
		
<div class="am-share">
	<div class="am-share-footer">
		<button class="share_btn"><img src="img/chahao.png"/></button>
	</div>
	<div class="am-share-sns box-s">
		<div class="sdetail clearfloat">
			<div class="top clearfloat">
				<div class="tu clearfloat fl" id="gwcphoto">

				</div>
				<div class="you clearfloat fl" id="gwcprice">
					<p class="tit">小米Max</p>
					<span>2998购物币+700积分</span>
				</div>
			</div>
			<!-- <div class="bottom clearfloat">
				<p class="fl">购买数量</p>
				<div class="col-md-12 form-space">
					<label for="num">数量：</label>
					<input id="numDown" type="button" value="-" class="num-btn" onclick="decr()"/>
					<input id="num" type="text" size="2" readonly="readonly" class="num-text" value="2">
					<input id="numUp" class="num-btn" type="button" value="+" onclick="add()"/>
				</div>
			</div> -->
			<div class="bottom clearfloat">
				<p class="fl">购买数量</p>
				<div class="you clearfloat fr">
					<ul>
						<li  onclick="decr()"><img src="img/jian.jpg"></li>
						<li><input id="num" type="text" size="2" readonly="readonly" class="num-text" value="1" style="height: 100%; padding: 0px; text-align: center;border: none; background-color: transparent;"></li>
						<li  onclick="add()"><img src="img/jia.jpg"></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<a href="javascript:void(0)" class="shop-btn db" id="addCart" onclick="addCart">确定</a>
</div>

<!--footer star-->
<footer class="page-footer fixed-footer" id="footer">
	<ul>
		<li>
			<a href="index.html">
				<i class="iconfont icon-shouye"></i>
				<p>首页</p>
			</a>
		</li>
		<li class="active">
			<a href="cation.html">
				<i class="iconfont icon-icon04"></i>
				<p>分类</p>
			</a>
		</li>
		<li>
			<a href="shopcar.html">
				<i class="iconfont icon-gouwuche"></i>
				<p>购物车</p>
			</a>
		</li>
		<li>
			<a href="login.html">
				<i class="iconfont icon-yonghuming"></i>
				<p>我的</p>
			</a>
		</li>
	</ul>
</footer>
<!--footer end-->
</body>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script src="js/mui.min.js"></script>
<!-- <script src="js/others.js"></script> -->
<script type="text/javascript" src="js/hmt.js"></script>
<script src="slick/slick.js" type="text/javascript"></script>
<script type="text/javascript" src="js/shopcar.js"></script>
<!--插件-->
<link rel="stylesheet" href="css/swiper.min.css">
<script src="js/swiper.jquery.min.js"></script>
<script>
	function decr(){
		var nm=parseInt($("#num").val());
		if(nm<=1) return;
		$("#num").val(nm-1);
	}

	function add(){
		var nm=parseInt($("#num").val());
		// var max=typelist.productNum;
		// console.log(max);
		// if(nm>=max) return;
		$("#num").val(nm+1);
	}
	$(function(){
					// 获取地址栏中的id参数
					var path=window.location.href;
					var index=path.lastIndexOf("?");
					var id=10000001;
					if(index!=-1){
						var params=path.substring(index+1);
						var array=params.split("&");
						if(array[0].startsWith("id=")){
							id=array[0].split("=")[1];
						}
					}

				
	
				
					var addCartUrl=baseUrl+ "/zuul-cart/carts/create"
					$("#addCart").click(function(){
						var num=$("#num").val();
						var params={
							pid:id,
							num:num,
							uid:localStorage.getItem('uid'),
							username:localStorage.getItem('username')
						}
						$.post(addCartUrl,params,function(result){
							if(result.msg == "erroy") {
								alert("您还没有登录,请先登录！");
								location.replace("login.html");
							}
							else {
								if(result.state==1000){
									alert("购物车添加成功");
								}else{
									alert(result.msg);
								}
							}
	
						})
					});
				});
</script>
</html>
